<template>
    <div ref="scrollContainer" style="overflow-x: hidden;  overflow-y: auto;" :style="{ height: height }"
        @mouseenter="stopScroll" @mouseleave="resumeScroll">
        <slot></slot>
    </div>
</template>

<script>
export default {
    props: {
        height: {
            type: String,
            default: '220px'
        },
        scrollSpeed: {
            type: Number,
            default: 0.5
        },
        bottomPause: {
            type: Number,
            default: 1000
        },
        smoothReturn: {
            type: Boolean,
            default: false
        },
        minDelta: {
            type: Number,
            default: 0.1
        }
    },
    data() {
        return {
            isScrollingDown: true,
            scrollAnimationFrameId: null,
            isAutoScrollRunning: false,
            accumulatedDelta: 0, // 累积小数增量
            isPaused: false // 新增状态，用于标记是否暂停
        };
    },
    mounted() {
        this.startAutoScroll();
        window.addEventListener('resize', this.handleResize);
        // 监听浏览器缩放事件
        window.addEventListener('zoom', this.handleResize);
    },
    beforeDestroy() {
        this.stopAutoScroll();
        window.removeEventListener('resize', this.handleResize);
        window.removeEventListener('zoom', this.handleResize);
    },
    methods: {
        startAutoScroll() {
            if (this.isAutoScrollRunning) return;
            this.isAutoScrollRunning = true;
            const scrollContainer = this.$refs.scrollContainer;

            // 平滑滚动方法
            const smoothScrollTo = (target) => {
                if (!this.smoothReturn) {
                    scrollContainer.scrollTop = target;
                    return;
                }

                const start = scrollContainer.scrollTop;
                const duration = 800;
                let startTime = null;

                const animate = (timestamp) => {
                    if (!startTime) startTime = timestamp;
                    const progress = timestamp - startTime;
                    const percent = Math.min(progress / duration, 1);

                    // 缓动函数：easeOutQuad
                    const eased = 1 - Math.pow(1 - percent, 2);
                    scrollContainer.scrollTop = start + (target - start) * eased;

                    if (percent < 1) {
                        requestAnimationFrame(animate);
                    }
                };

                requestAnimationFrame(animate);
            };

            const autoScroll = () => {
                if (!this.isAutoScrollRunning || this.isPaused) return;

                const { scrollTop, clientHeight, scrollHeight } = scrollContainer;
                const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
                const isAtTop = scrollTop <= 0;
                // 累积小数增量
                this.accumulatedDelta += this.scrollSpeed;

                const actualMove = Math.floor(this.accumulatedDelta);
                this.accumulatedDelta -= actualMove;

                if (this.isScrollingDown) {

                    if (isAtBottom) {
                        this.isScrollingDown = false;
                        this.accumulatedDelta = 0; // 重置累积值
                        smoothScrollTo(0);
                        setTimeout(() => {
                            if (this.isAutoScrollRunning && !this.isPaused) {
                                this.isScrollingDown = true;
                                autoScroll();
                            }
                        }, this.bottomPause);
                        return;
                    }
                    scrollContainer.scrollTop += actualMove;
                } else {
                    if (isAtTop) {
                        this.isScrollingDown = true;
                        this.accumulatedDelta = 0;
                        autoScroll();
                        return;
                    }
                    scrollContainer.scrollTop -= actualMove;
                }

                // 根据最小移动单位优化性能
                if (actualMove >= this.minDelta || Math.abs(this.accumulatedDelta) >= this.minDelta) {
                    this.scrollAnimationFrameId = requestAnimationFrame(autoScroll);
                } else {
                    this.scrollAnimationFrameId = requestAnimationFrame(autoScroll);
                }
            };

            autoScroll();
        },
        stopAutoScroll() {

            this.isAutoScrollRunning = false;
            cancelAnimationFrame(this.scrollAnimationFrameId);
        },
        stopScroll() {
            this.isPaused = true;
            cancelAnimationFrame(this.scrollAnimationFrameId);
        },
        resumeScroll() {
            this.isPaused = false;
            if (this.isAutoScrollRunning) {
                this.isAutoScrollRunning = false
                this.startAutoScroll();
            }
        },
        handleResize() {
            // 停止当前滚动
            this.stopAutoScroll();
            // 重置滚动方向和累积增量
            this.isScrollingDown = true;
            this.accumulatedDelta = 0;
            // 短暂延迟后重新启动滚动，确保浏览器完成缩放操作
            setTimeout(() => {
                this.startAutoScroll();
            }, 100);
        }
    }
};
</script>

<style scoped>
/* 可以在这里添加滚动容器的样式 */
</style>